<template>
  <el-form
    ref="roleForm"
    label-position="right"
    size="mini"
    :rules="rules"
    :model="data"
    label-width="80px"
  >
    <el-row>
      <el-col :span="11">
        <el-form-item
          label="角色名称"
          prop="rolename"
        >
          <el-input v-model="data.rolename" />
        </el-form-item>
      </el-col>

      <el-col
        :span="11"
        :offset="1"
      >
        <el-form-item
          label="角色类别"
          prop="roletype"
        >
          <el-select
            v-model="data.roletype"
            placeholder="请选择"
          >
            <el-option
              label="本系统通用角色"
              :value="1"
            />
            <el-option
              label="一键发布角色"
              :value="2"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item
          label="角色描述"
          prop="remark"
        >
          <el-input
            v-model="data.remark"
            type="textarea"
            autosize
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: {
    // 表单
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      depList: [],
      // 新增表单规则
      rules: {
        rolename: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        roletype: [
          { required: true, message: "角色类别不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    submit() {
      this.$refs["roleForm"].validate((valid) => {
        if (valid) {
          this.$emit("submit");
        }
      });
    },
  },
};
</script>
